<template>
  <div class="form">
    <van-form @submit="onSubmit" ref="form">
      <van-field
      type="number"
        name="tel"
        v-model="user.mobile"
        placeholder="请输入手机号"
        maxlength="11"
        :rules="userRules.mobile">
        <van-icon size="18" color="#b2b2b2" class="iconfont" slot="left-icon" class-prefix="icon" name="shouji" />
      </van-field>
      <van-field
        name="code"
        type="number"
        autocomplete="off"
        v-model="user.code"
        maxlength="6"
        placeholder="请输入验证码"
        :rules="userRules.code">
        <van-icon size="18" color="#b2b2b2" class="iconfont" slot="left-icon" class-prefix="icon" name="yanzhengma" />
        <span slot="extra" class="line">|</span>
        <van-count-down v-if="isShow" slot="extra" :time="(60 * 1000)" format="ss 秒" 
        @finish="isShow = false"/>
        <span slot="extra" v-else class="iclassfy" @click="sendMsg">获取验证码</span>
      </van-field>
      <div style="margin: 16px;">
        <van-button color="#6db4fb" block type="info" 
        native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { LoginAPI,sendCodeAPI} from '@/api'
import { mapState } from 'vuex';
export default {
  data() {
    return {
      user: {
        mobile: '',
        code: '',
      },
      userRules: {
        mobile: [
          {required: true, message: '输入不能为空'},
          {pattern: /^1\d{10}$/, message: '请输入11位手机号' }
        ],
        code: [
          {required: true,message: '输入不能为空'},
          {pattern: /^\d{6}$/,message: '请输入6位验证码'}
        ]
      },
      isShow: false,
    };
  },
  computed:{
    ...mapState(['token']),
  },
  methods: {
    async onSubmit () {
      //获取表单数据
      const user = this.user
      this.$toast.loading({
        message: '登录中',
        forbidClick: true,
        duration: 0
      });
      //提交表单请求登录
      try {
        // console.log('-----------');
          const {data} = await LoginAPI(user)
          // console.log(data);
          this.$store.commit('updateToken',data.data)
          this.$toast.success('登录成功')
          //登录成功回到上一个页面
          this.$router.push({name: 'user'})
      } catch (err) {
        console.log(err);
        if(err.response.status === 400) {
          this.$toast.fail('手机号或验证码失败！')
        }else {
          console.log('登录失败', err)
        }
      }
    },
    // 发送验证码，校验手机号
    async sendMsg(){
      //只进行手机号码的校验
      try {
        await this.$refs.form.validate('tel')
      } catch (error) {
        return console.log('手机号码验证失败',error);
      }
      //倒计时显示控制变量
      this.isShow = true
      try {
        console.log(this.user.mobile);
        const data = await sendCodeAPI(this.user.mobile)
        this.$toast('发送成功')
        console.log(data);
      } catch (error) {
        this.$toast('发送失败')
        console.log(error);
      }
    },
  }
};
</script>

<style scoped lang="less">
  .form{
    margin-top: 92px;
    .line {
      display: inline-block;
      width: 2px;
      height: 46px;
      font-size: 22px;
      color: #eee;
      margin-right: 20px;
    }
    .iclassfy{
      display: inline-block;
      background-color: #eee;
      width: 154px;
      height: 46px;
      border-radius: 23px;
      font-size: 22px;
      color: #666;
      text-align: center;
    }
    
  }
</style>